<template>
	<div class="mainContent spotOrderDetail">
		<pathTracking :path="Model.path" />
		<div class="container">
			<!-- 一级tabs -->
			<el-tabs v-model="Model.activeTab" @tab-click="onTabChange">
				<el-tab-pane label="订单详情" name="1"></el-tab-pane>
				<el-tab-pane label="支付记录" name="2"></el-tab-pane>
				<el-tab-pane label="发货记录" name="3"></el-tab-pane>
				<el-tab-pane label="操作日志" name="4"></el-tab-pane>
			</el-tabs>
			<div class="tabBox">
				<div class="detailsTabsBtn" v-show="Model.activeTab == 1 && Model.pageOrderStatus == 1">
					<p class="itemBtn" @click="Approval">审核</p>
				</div>
				<el-row class="detailTable">
					<el-form :inline="true">
						<el-col :sm="24" :md="12" :lg="8" :xl="6" v-for="(item,index) in Model.tabFormInline" :key="index">
							<el-form-item :label="item.label+'：'">{{item.value}}</el-form-item>
						</el-col>
					</el-form>
				</el-row>
				<div class="tabBoxStep">
					<el-steps :active="Model.refundStep.activeStep">
						<el-step :title="item.title" :description="item.description" v-for="(item,index) in Model.refundStep.step" :key="index"></el-step>
					</el-steps>
				</div>
				<el-row class="detailTable">
					<div class="detailTableItemTitle">
						<img class="detailTableImgSmall" src="@/assets/img/flower_brown.png" alt="">
						<p class="text">订单基础信息</p>
						<img class="detailTableImgNormal" :src="Model.detailTableFrom.src" alt="" @click="toggleTableDetail('detailTableFrom')">
					</div>
					<el-form :inline="true" v-show="Model.detailTableFrom.flag">
						<el-col :sm="24" :md="12" :lg="8" :xl="6" v-for="(item,index) in Model.tableFormInline" :key="index">
							<el-form-item :label="item.label+'：'">{{item.value}}</el-form-item>
						</el-col>
					</el-form>
				</el-row>
				<!-- **********************************************               tab1                   ************************************** -->
				<div v-show="Model.activeTab==1">
					<!-- 用户资料 -->
					<el-row class="detailTable">
						<div class="detailTableItemTitle">
							<img class="detailTableImgSmall" src="@/assets/img/flower_brown.png" alt="">
							<p class="text">用户资料</p>
							<img class="detailTableImgNormal" :src="Model.detailTableFrom2.src" alt="" @click="toggleTableDetail('detailTableFrom2')">
						</div>
						<el-form :inline="true" v-show="Model.detailTableFrom2.flag">
							<el-col :sm="24" :md="12" :lg="8" :xl="6" v-for="(item,index) in Model.tableFormUserMsg" :key="index">
								<el-form-item :label="item.label+'：'">{{item.value}}</el-form-item>
							</el-col>
						</el-form>
					</el-row>
					<!-- 收货地址 （只在选择快递时） -->
					<el-row class="detailTable" v-if="Model.shippingMethod == 0">
						<div class="detailTableItemTitle">
							<img class="detailTableImgSmall" src="@/assets/img/flower_brown.png" alt="">
							<p class="text">收货地址</p>
							<img class="detailTableImgNormal" src="@/assets/img/icon_edit.png" @click="openDialogAddress()">
							<img class="detailTableImgNormal" :src="Model.detailTableFrom3.src" alt="" @click="toggleTableDetail('detailTableFrom3')">
						</div>
						<el-form :inline="true" v-show="Model.detailTableFrom3.flag">
							<el-col :sm="24" :md="12" :lg="8" :xl="6" v-for="(item,index) in Model.saleAddressData" :key="index">
								<el-form-item v-if="item.label == '收件地址类型'" :label="item.label+'：'">{{item.value | addressTypeFilter}}</el-form-item>
								<el-form-item v-else :label="item.label+'：'">{{item.value}}</el-form-item>
							</el-col>
						</el-form>
					</el-row>
					<!-- 自提地址 （只在选择自提时） -->
					<el-row class="detailTable" v-if="Model.shippingMethod == 1">
						<div class="detailTableItemTitle">
							<img class="detailTableImgSmall" src="@/assets/img/flower_brown.png" alt="">
							<p class="text">自提地址</p>
							<img class="detailTableImgNormal" src="@/assets/img/icon_edit.png" @click="Model.onDialogself = true">
							<img class="detailTableImgNormal" :src="Model.detailTableFrom4.src" alt="" @click="toggleTableDetail('detailTableFrom4')">
						</div>
						<el-form :inline="true" v-show="Model.detailTableFrom4.flag">
							<el-col :sm="24" :md="12" :lg="8" :xl="6" v-for="(item,index) in Model.saleAddressSelfData" :key="index">
								<el-form-item :label="item.label+'：'">{{item.value}}</el-form-item>
							</el-col>
						</el-form>
					</el-row>
					<!-- 订单商品明细 -->
					<el-row class="detailTable">
						<div class="detailTableItemTitle">
							<img class="detailTableImgSmall" src="@/assets/img/flower_brown.png" alt="">
							<p class="text">订单商品明细</p>
							<img class="detailTableImgNormal" :src="Model.tab1TableDetail1.src" alt="" @click="toggleTableDetail('tab1TableDetail1')">
						</div>
						<div class="detailTableDetail" v-show="Model.tab1TableDetail1.flag">
							<el-table :data="Model.tab1TableData" border @selection-change="handleSelectionChange">
								<el-table-column 
								v-for="(item,index) in Model.tab1TableHeader"
								:key="index"
								:prop="item.prop" 
								:label="item.label" 
								:width="item.width">
								</el-table-column>
							</el-table>
						</div>
					</el-row>
				</div>
				<!-- **********************************************               tab2    支付记录               ************************************** -->
				<div v-show="Model.activeTab==2">
					<el-row class="detailTable">
						<div class="detailTableItemTitle">
							<img class="detailTableImgSmall" src="@/assets/img/flower_brown.png" alt="">
							<p class="text">收款记录</p>
							<img class="detailTableImgNormal" :src="Model.tab3TableDetail1.src" alt="" @click="toggleTableDetail('tab3TableDetail1')">
						</div>
						<div class="detailTableDetail" v-show="Model.tab3TableDetail1.flag">
							<el-table :data="Model.tab3TableData1" border style="width: 100%;" @selection-change="handleSelectionChange">
								<el-table-column 
								v-for="(item,index) in Model.tab3TableHeader1"
								:key="index"
								:prop="item.prop" 
								:label="item.label" 
								:width="item.width">
								</el-table-column>
								<el-table-column align="center" label="财务确认">
									<template slot-scope="scope">
										<div>{{scope.row.status | financeFilter}}</div>
									</template>
								</el-table-column>
								<el-table-column align="center" label="支付方式">
									<template slot-scope="scope">
										<div>{{scope.row.paymentMethod | paymentMethodFilter}}</div>
									</template>
								</el-table-column>
								<el-table-column align="center" label="sap过账">
									<template slot-scope="scope">
										<div>{{scope.row.posting | spaPostingFilter}}</div>
									</template>
								</el-table-column>
							</el-table>
						</div>
						<div class="detailTableItemTitle">
							<img class="detailTableImgSmall" src="@/assets/img/flower_brown.png" alt="">
							<p class="text">退款记录</p>
							<img class="detailTableImgNormal" :src="Model.tab3TableDetail2.src" alt="" @click="toggleTableDetail('tab3TableDetail2')">
						</div>
						<div class="detailTableDetail" v-show="Model.tab3TableDetail2.flag">
							<el-table :data="Model.tab3TableData2" border style="width: 100%;" @selection-change="handleSelectionChange">
								<el-table-column 
								v-for="(item,index) in Model.tab3TableHeader2"
								:key="index"
								:prop="item.prop" 
								:label="item.label" 
								:width="item.width">
								</el-table-column>
							</el-table>
						</div>
					</el-row>
				</div>
				<!-- **********************************************               tab3    发货记录               ************************************** -->
				<div v-show="Model.activeTab==3">
					<el-row class="detailTable">
						<div class="detailTableItemTitle">
							<img class="detailTableImgSmall" src="@/assets/img/flower_brown.png" alt="">
							<p class="text">发货记录</p>
							<img class="detailTableImgNormal" :src="Model.tab4TableDetail1.src" alt="" @click="toggleTableDetail('tab4TableDetail1')">
						</div>
						<div class="detailTableDetail" v-show="Model.tab4TableDetail1.flag">
							<el-table :data="Model.tab4TableData" border show-summary style="width: 100%;" @selection-change="handleSelectionChange">
								<el-table-column prop="origin" label="时间" width="100"></el-table-column>
								<el-table-column prop="deliveryTime" label="操作类型" width="120"></el-table-column>
								<el-table-column prop="deliveryTime2" label="操作人" width="120"></el-table-column>
								<el-table-column prop="qcFinishTime" label="操作记录"></el-table-column>
							</el-table>
						</div>
					</el-row>
				</div>
				<!-- **********************************************               tab4    操作日志              ************************************** -->
				<div v-show="Model.activeTab==4">
					<el-row class="detailTable">
						<div class="detailTableItemTitle">
							<img class="detailTableImgSmall" src="@/assets/img/flower_brown.png" alt="">
							<p class="text">订单操作日志</p>
							<img class="detailTableImgNormal" :src="Model.tab4TableDetail1.src" alt="" @click="toggleTableDetail('tab4TableDetail1')">
						</div>
						<div class="detailTableDetail" v-show="Model.tab4TableDetail1.flag">
							<el-table :data="Model.tab9TableData" border max-height="550" @selection-change="handleSelectionChange">
								<el-table-column prop="createTime" label="时间" width="100"></el-table-column>
								<el-table-column prop="type" label="操作类型" width="120"></el-table-column>
								<el-table-column prop="createBy" label="操作人" width="120"></el-table-column>
								<el-table-column prop="record" label="操作记录"></el-table-column>
							</el-table>
						</div>
					</el-row>
				</div>
				
			</div>
		</div>
		<!-- 修改收货地址 -->
		<el-dialog :visible.sync="Model.onDialogAddress" top="100px" class="viewDialog">
			<div class="common-table-title">
				<div class="common-table-icon"></div>
				<div class="common-table-fl">编辑订单收货信息</div>
			</div>
			<div style="background: #fff;">
				<el-form ref="form" label-width="120px" size="small">
					<el-form-item label="短信通知手机">
						<el-input v-model="Model.userAddressMsg.messagePhone"></el-input>
					</el-form-item>
					<el-form-item label="是否新建地址">
						<el-radio-group v-model="Model.userAddressMsg.isNewAddress">
							<el-radio :label="true">是</el-radio>
							<el-radio :label="false">否</el-radio>
						</el-radio-group>
					</el-form-item>
					<div v-if="Model.userAddressMsg.isNewAddress">
						<el-form-item label="收件人姓名">
							<el-input v-model="Model.userAddressMsg.recipientName"></el-input>
						</el-form-item>
						<el-form-item label="收件人手机号">
							<el-input v-model="Model.userAddressMsg.recipientPhone"></el-input>
						</el-form-item>
						<el-form-item label="收件地址类型">
							<el-radio-group v-model="Model.userAddressMsg.addressType">
								<el-radio :label="1">大陆</el-radio>
								<el-radio :label="2">海外</el-radio>
							</el-radio-group>
						</el-form-item>
						<el-form-item label="收件人地区">
							<el-cascader
							  :options="Model.options"
							  @active-item-change="handleItemChange"
							  @change="changecascards"
							  :props="Model.props"
							  v-model="Model.userAddressMsg.addressArea"
							></el-cascader>
						</el-form-item>	
						<el-form-item label="详细地址">
							<el-input v-model="Model.userAddressMsg.detailedAddress"></el-input>
						</el-form-item>
					</div>
					<div v-else>
						<el-form-item label="请选择地址">
							<div class="chooseAddress">
								<el-radio-group v-model="Model.checkedAddressOpt">
									<el-radio :label="item" v-for="(item,index) in Model.addressInfoList" :key="index">
										<a><span>{{item.name}}</span><span>{{item.phone}}</span><span v-if="item.defaultAddress">默认地址</span></a>
										<p>{{item.geographyProvince.provinceName}}{{item.geographyCity.cityName}}{{item.geographyArea.areaName}}{{item.address}}</p>
									</el-radio>
								</el-radio-group>
							</div>
						</el-form-item>
					</div>
				</el-form>
				<div class="viewDialogFooter">
					<div class="viewDialogFooterSure" @click="saleAddressSave">保存</div>
					<div class="viewDialogFooterCancel" @click="Model.onDialogAddress = false">取消</div>
				</div>
			</div>
		</el-dialog>
		<!-- 修改自提地址 -->
		<el-dialog :visible.sync="Model.onDialogself" top="100px" class="viewDialog">
			<div class="common-table-title">
				<div class="common-table-icon"></div>
				<div class="common-table-fl">编辑自提信息</div>
			</div>
			<div style="padding:30px;background: #fff;">
				<el-form ref="form" label-width="120px" size="small">
					<el-form-item label="自提店铺城市">
						<el-select class="input-cont" v-model="Model.userSelfLift.takeGoodsShopCity" @change="queryStore" filterable placeholder="请输入内容">
							<el-option
							  v-for="(city,index) in Model.allCities"
							  :key="index"
							  :label="city.cityName"
							  :value="city.cityName">
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="自提店铺">
						<el-select class="input-cont" v-model="Model.userSelfLift.takeGoodsShop" filterable placeholder="请输入内容">
							<el-option
							  v-for="(store,index) in Model.cityStore"
							  :key="index"
							  :label="store.theNameOfTheStore"
							  :value="store.theNameOfTheStore">
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="自提时间">
						<el-date-picker class="input-cont" value-format="yyyy-MM-dd" v-model="Model.userSelfLift.time" type="date" placeholder="选择日期"></el-date-picker>
					</el-form-item>
				</el-form>
				<div class="viewDialogFooter">
					<div class="viewDialogFooterSure" @click="saleaddressSelfSave">保存</div>
					<div class="viewDialogFooterCancel" @click="Model.onDialogself = false">取消</div>
				</div>
			</div>
		</el-dialog>
		<!-- 编辑地址 -->
		<el-dialog :visible.sync="Model.adressDialog" top="100px" class="adressDialog">
			<div class="common-table-title">
				<div class="common-table-icon"></div>
				<div class="common-table-fl">编辑收货地址</div>
			</div>
			<div style="padding:30px;background: #fff;">
				<el-form ref="form" v-model="Model.adressDialogit">
					<el-form-item label="收件人姓名：" >
						<el-input v-model="Model.adressDialogit.recipientName"></el-input>
					</el-form-item>
					<el-form-item label="联系电话：" >
						<el-input v-model="Model.adressDialogit.recipientPhone"></el-input>
					</el-form-item>
					<el-form-item label="收件人地址：" >
						<el-input v-model="Model.adressDialogit.detailedAddress"></el-input>
					</el-form-item>
				</el-form>
				<div class="viewDialogFooter">
					<div class="viewDialogFooterSure" @click="ToSaveadress">确定</div>
					<div class="viewDialogFooterCancel"  @click="Model.adressDialog = false">取消</div>
				</div>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	import pathTracking from "@/components/common/pathTracking";
	import pagination from "@/components/common/pagination.vue";
	import advancedSearch from "@/components/common/filter/advancedSearch";
	import {
		getDateString
	} from "@/assets/js/common.js";
	import Model from "./model.js";
	import Controller from "./controller.js";
	export default {
		name: "purchase",
		mixins: [Model, Controller],
		components: {
			advancedSearch,
			pagination,
			pathTracking
		}
	};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
	@import "./index.less";
</style>
